<template>
  <div>
    <Button type="primary" icon="ios-search">搜索</Button>
    <Button type="primary" icon="plus-round" @click="openAddModel">新增</Button>
    <Button type="error" icon="ios-trash">删除</Button>
    <Table border :columns="customerManagementColumns" :data="customerManagementData"></Table>
    <Modal
      :title="messages"
      v-model="addModel"
      width="800">
      <Form :model="formCustomerManagement" :label-width="80">
        <Row>
          <i-col span="12">
            <Form-item label="客户类型：">
              <Select v-model="formCustomerManagement.customer" placeholder="请选择">
                <Option value="beijing">北京市</Option>
              </Select>
            </Form-item>
            <Form-item label="客户编码：">
              <Input v-model="formCustomerManagement.clientName" type="text"  placeholder="请输入..."></Input>
            </Form-item>
          </i-col>
          <i-col span="12">
            <Form-item label="客户名称：">
              <Input v-model="formCustomerManagement.clientName" type="text"  placeholder="请输入..."></Input>
            </Form-item>
            <Form-item label="客户传真：">
              <Input v-model="formCustomerManagement.clientName" type="text"  placeholder="请输入..."></Input>
            </Form-item>
          </i-col>
        </Row>
        <Form-item label="客户地址：">
          <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
        </Form-item>
        <Row>
          <i-col span="12">
            <Form-item label="所属区县：">
              <Select v-model="formCustomerManagement.customer" placeholder="请选择">
                <Option value="beijing">北京市</Option>
              </Select>
            </Form-item>
            <Form-item label="联系人：">
              <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
            </Form-item>
            <Form-item label="联系电话：">
              <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
            </Form-item>
          </i-col>
          <i-col span="12">
            <Form-item label="地区代码：">
              <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
            </Form-item>
            <Form-item label="手机号码：">
              <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
            </Form-item>
            <Form-item label="邮政编码：">
              <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
            </Form-item>
          </i-col>
        </Row>
        <Form-item label="邮箱：">
          <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
        </Form-item>
        <Form-item label="企业网址：">
          <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
        </Form-item>
        <Form-item label="经济行业：">
          <Input v-model="formCustomerManagement.fAddress" type="text"  placeholder="请输入..."></Input>
        </Form-item>
        <Form-item label="客户描述：">
          <Input v-model="formCustomerManagement.fAddress" type="textarea" :autosize="{minRows: 2,maxRows: 5}"  placeholder="请输入..."></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="ghost"  :loading="delete_loading" >取消</Button>
        <Button type="info"  :loading="delete_loading" >确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import ICol from "../../node_modules/iview/src/components/grid/col";
  export default {
    components: {ICol},
    data () {
      return {
        messages:'新增客户信息',
        addModel:false,
        delete_loading:false,
        customerManagementColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.updateCustomerManagement(params.index)
                    }
                  }
                }, '修改'),
              ]);
            }
          }
        ],
        customerManagementData: [
          {
            name: '王小明',
            age: 18,
            address: '北京市朝阳区芍药居'
          },
          {
            name: '张小刚',
            age: 25,
            address: '北京市海淀区西二旗'
          },
          {
            name: '李小红',
            age: 30,
            address: '上海市浦东新区世纪大道'
          },
          {
            name: '周小伟',
            age: 26,
            address: '深圳市南山区深南大道'
          }
        ],
        formCustomerManagement:{
          customer:'',  //客户类型
          clientName:'', //客户名称
          fAddress:'',  //客户地址
          fax:'', //传真
          clientNo:'',  //客户编码
        },
      }
    },
    methods:{
      openAddModel(){
          let _this = this;
          _this.addModel = true;
      },
      updateCustomerManagement(index){
          let _this = this;
          console.log(index);
      }
    }
  }
</script>
<style scoped></style>
